<template>
	<view class="page">
		<view class="header">
			<image src="/static/mine/Group_215.png" mode="aspectFit"></image>
			<text style="text-align: center;margin: 10px 0px 0px;">牙荷医疗美容诊所</text>
		</view>
		<view class="content">
			<text class="amount">-85.90</text>
			<text class="amount-text">交易成功</text>
		</view>
		<div class="line">

		</div>
		<view class="details">
			<view class="detail-item">
				<text class="detail-item-label">支付方式</text>
				<text class="detail-item-text">钱包余额</text>
			</view>
			<view class="detail-item">
				<text class="detail-item-label">创建时间</text>
				<text class="detail-item-text">2024-10-11 10:15:10</text>
			</view>
			<view class="detail-item">
				<text class="detail-item-label">订单编号</text>
				<text class="detail-item-text">1234567890</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// Any data needed for the component
			};
		},
	};
</script>

<style>
	.page {
		padding: 40rpx;
	}

	.header {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.header image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin: 20rpx 0rpx;
	}

	.content {
		display: flex;
		flex-direction: column;
	}

	.content .amount {
		text-align: center;
		margin: 28rpx 0rpx;

		font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
		font-weight: 500;
		font-size: 52rpx;
		color: #3A3A3A;
		font-style: normal;
		text-transform: none;
	}

	.amount-text {
		font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #3A3A3A;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.details {
		margin-top: 40rpx;
	}

	.details .detail-item {
		display: flex;
		margin-bottom: 30rpx;
	}

	.line {
		width: 100%;
		margin: 80rpx auto;
		border: 0.2rpx solid #EFEFEF;
	}

	.detail-item-label {
		font-weight: 400;
		font-size: 28rpx;
		color: #6D6D6D;
	}

	.detail-item-text {
		margin-left: 48rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #3A3A3A;
	}
</style>